<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>welcome to GCB</title>
    <style>
        body {
            margin: 0;
        }
        
        div#welcome-main {
            margin: 0;
            position: absolute;
            height: 90%;
            width: 100%;
            background-color: coral;
            /* color: coral; */
        }
        
        div#tag-main {
            position: relative;
            height: 80%;
            width: 50%;
            left: 0;
            right: 0;
            margin: auto;
            background-color: cornflowerblue;
        }
        
        div#comfirm {
            position: relative;
            width: 40%;
            bottom: -45%;
            left: 0;
            right: 0;
            margin: auto;
            text-align: center;
            /* vertical-align: center; */
            line-height: 50px;
            background-color: #fff;
            height: 50px;
        }
        
        div.round25 {
            border: cornflowerblue;
            border-radius: 25px;
        }
        
        div#header {
            margin: auto;
            left: 0;
            right: 0;
            text-align: center;
            width: 70%;
        }
        
        div#logo {
            position: fixed;
            left: 0;
            top: 20px;
            height: 100px;
        }
        
        div#user-info {
            position: fixed;
            right: 0;
            top: 20px;
            height: 100px;
        }
        
        div.tag-round {
            border: cornflowerblue;
            border-radius: 50%;
            background-color: #fff;
            height: 160px;
            width: 160px;
            position: relative;
            display: inline-block;
        }
        
        div#r1 {
            left: 30px;
            top: 20px;
        }
        
        div#r2 {
            left: 40px;
            top: 60px;
        }
        
        div#r3 {
            left: 30px;
            top: 140px;
        }
        
        div#r4 {
            left: 80px;
            top: 50px;
        }
        
        div#r5 {
            left: 80px;
            top: 120px;
        }
    </style>
</head>

<body>
    <div id="header">
        <h1>
            欢迎来到广吃宝
        </h1>
        <h3>接下来的日子就让我带领你吃遍广州美食~~</h2>
            <div id="logo">
                <h1>GCB</h1>
            </div>
            <div id="user-info">DatinGeo <a href="javascript:">登出</a> </div>
    </div>

    <div id="welcome-main">
        <div id="tag-main">
            <div class="tag-round" id="r1"></div>
            <div class="tag-round" id="r2"></div>
            <div class="tag-round" id="r3"></div>
            <div class="tag-round" id="r4"></div>
            <div class="tag-round" id="r5"></div>
            <div id="comfirm" class="round25">开启我的美食之旅</div>
        </div>
    </div>
</body>

</html>